<template>
    <div class="detalis-container">
        <div class="book-container">
            <div class="book-header">
                <h1 class="h">{{book.bookName}}</h1>
            </div>
            <div class="book-body">
                <div class="img-container">
                    <img :src="'http://localhost:10000'+book.imgUrl" alt="" srcset="">
                </div>
                <div class="book-deatlis">
                    <div v-if="book.author">
                        <span>作者:</span>
                        <span>{{book.author}}</span>
                    </div>
                    <div v-if="book.oBookName">
                        <span>原著:</span>
                        <span>{{book.oBookName}}</span>
                    </div>
                    <div v-if="book.press">
                        <span>出版社:</span>
                        <span>{{book.press}}</span>
                    </div>
                    <div v-if="book.product" >
                        <span>出品方:</span>
                        <span>{{book.product}}</span>
                    </div>
                    <div v-if="book.subtitle">
                        <span>副标题:</span>
                        <span>{{book.subtitle}}</span>
                    </div>
                    <div v-if="book.tarnslator">
                        <span>译者:</span>
                        <span>{{book.tarnslator}}</span>
                    </div>
                    <div v-if="book.birthday">
                        <span>出版年:</span>
                        <span>{{book.birthday}}</span>
                    </div>

                    <div v-if="book.pageNumber" >
                        <span>页数:</span>
                        <span>{{book.pageNumber}}</span>
                    </div>
                    <div v-if="book.price">
                        <span>定价:</span>
                        <span>{{book.price}}</span>
                    </div>
                    <div v-if="book.dreUp">
                        <span>装帧:</span>
                        <span>{{book.dreUp}}</span>
                    </div>
                    <div>
                        <span>库存:</span>
                        <span>{{book.sum}}本</span>
                    </div>
                    <div  v-if="book.series">
                        <span>丛书:</span>
                        <span>{{book.series}}</span>
                    </div>
                    <div>
                        <span>ISBN:</span>
                        <span>{{book.ISBN}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="button-container">
            <div class="button-class">
                    <el-button type="warning"
                    @click="addBookList"
                     icon="el-icon-star-off" circle></el-button>
            </div>
             <div class="button-class">
                 <el-button  @click="borrowBook"  type="success" plain>借阅</el-button>
             </div>
            
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            book:null,
        }
    },
    methods:{//'http://localhost:10000/
        async borrowBook(){//点击借阅按钮触发
           if($Cookies.get("userId")){//通过判断cookie中是否存在userId来确定用户是否登录，若未登录则弹出登录界面
                const result = await this.$axios.put("/api/user/borrowBook",{//向后端发出借阅请求，使用put请求通过axios，传入书籍的id
                    BookId:this.book.id
                })
                if(result){
                    this.$message({
                      showClose: true,
                      message: '借阅成功！',
                      type: 'success'
                      });
                }else{
                    this.$message({
                      showClose: true,
                      message: '该书已经在借，请还回再借！',
                      type: 'error'
                      });
                }

              }else{
                  store.commit("setLoginGui",true);//未登录弹出登录框
              }
        },
       async addBookList(){//点击收藏按钮触发
              if($Cookies.get("userId")){//通过判断cookie中是否存在userId来确定用户是否登录，若未登录则弹出登录界面
                
                const result = await this.$axios.put("/api/user/addBookList",{//向后端发出借阅请求，使用put请求通过axios，传入书籍的id
                    BookId:this.book.id
                })
                if(result){
                    this.$message({
                      showClose: true,
                      message: '添加成功！',
                      type: 'success'
                      });
                }else{
                    this.$message({
                      showClose: true,
                      message: '该书已经在书单！',
                      type: 'error'
                      });
                }

              }else{
                  store.commit("setLoginGui",true);//弹出登录框
              }
        }
    },
  async created(){//组件创建后自动执行
     const id = location.search.substr(1);//获取地址栏上传过来的书籍id
     const book =  await this.$axios.get('/api/book/idFindBook',{//向后端发送请求，根据传过来的书籍id请求书籍详细信息。
        params:{
            id
        }
    });
    store.commit("setDetalistBook",book);//把请求到的书籍详情传入仓库 
    this.book = store.state.detalistBook;//拿仓库中book的值赋值到当前组件的
     
       
  }
}
</script>
<style lang="less" scoped >
@media screen and (max-width:600px) {
    .book-body{
        justify-self: center !important;
        .book-deatlis{
            div{
                 white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
           
        }
    }
}
.book-header{
    background-color: #fff;
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #EBEEF5;
}
.book-body{
    display: flex;
    flex-wrap: wrap;
    padding:10px;
   .img-container{
       padding: 10px;
       width: 200px;
       img{
           width: 100%;
       }
   }
   .book-deatlis{
       padding: 10px;
       div{
           width: 300px;
           padding: 2px;
           border-bottom: 1px solid #EBEEF5;
        span{
            padding-left: 3px;
            margin-left: 10px;
        }
       }
   }
   
  
}
.button-container{
       display: flex;
       margin-left: 100px;
       padding-bottom: 10px;
       .button-class{
           width: 100px;
       }
   }
</style>